<template>
    <div id="kelist">
        <div class="container">
            <div class="title">
                <div class="line"></div>
                <div class="titleinfo">
                    辅导课程
                </div>
            </div>
            <!-- table -->
            <div class="table">
                 <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    label="课程名称"
                    align="center"
                    >
                    <template slot-scope="scope">
                        <el-link type="primary"> <i class="el-icon-video-play"></i>
                        <span style="margin-left: 10px">{{ scope.row.name }}</span> </el-link>
                        <!-- <el-button round icon="el-icon-video-play" type="primary">
                            {{ scope.row.name }}
                        </el-button> -->
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="课程模块"
                    align="center"
                    width="180">
                    <template slot-scope="scope">
                        <div class="module">
                            {{ scope.row.module }}
                        </div>
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="配套资料"
                    align="center"
                    width="180">
                    <template slot-scope="scope">
                        <div class="mating">
                            {{ scope.row.mating }}
                        </div>
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="配套资料"
                    align="center"
                    width="180">
                    <template slot-scope="scope">
                        <div class="declare">
                            {{ scope.row.declare }}
                        </div>
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="原价"
                    align="center"
                    >
                    <template slot-scope="scope">
                        <div class="originalprice">
                            {{ scope.row.originalprice }}
                        </div>
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="优惠价"
                    align="center"
                    >
                    <template slot-scope="scope">
                        <div class="preferentialprice" style="color:#007eff;">
                            {{ scope.row.preferentialprice }}
                        </div>
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="试听"
                    align="center"
                    >
                    <template slot-scope="scope">
                        <div class="preferentialprice" style="color:green;font-size:30px;cursor: pointer;">
                            <i class="el-icon-service" @click="TestLister(scope.row)"></i>
                        </div>
                    </template>
                    </el-table-column>


                    <el-table-column label="操作" align="center">
                    <template slot-scope="scope" >
                        <div class="test" style="margin:10px;">
                            <el-button
                            size="mini"
                            round
                            icon="el-icon-chat-line-round"
                            @click="handleEdit(scope.$index, scope.row)">咨询</el-button>
                        </div>
                        <div class="buy">
                            <el-button
                            size="mini"
                            round
                            icon="el-icon-shopping-cart-full"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">购买</el-button>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: []
            }
        },
        mounted () {
            this.getKeList();
        },
        methods: {
            async getKeList() {
                let res = await this.$axios.post("/port/index/classdeclare", { key: this.$key })
                // console.log(res);
                let code = res.data.code
                if (code == 200) {
                    this.tableData = res.data.data
                }
            },
            // shiting
            TestLister( item ) {

            },
        },
    }
</script>

<style lang="scss" scoped>
    #kelist {
        width: 100%;
        box-sizing: border-box;
        
        .container {
            width: 1200px;
            margin: 10px auto;
            background-color: #fff;
            padding: 20px;
            box-sizing: border-box;
            .title {
                width: 100%;
                display: flex;
                align-items: center;
                height: 60px;
                line-height: 60px;
                border-bottom: 1px solid #f5f5f5;
                .line {
                    width: 2px;
                    height: 15px;
                    background-color: #000;
                    margin-right: 10px;
                }
            }
        }
    }
</style>